<template>
    <div>
        <van-nav-bar title="个人简历编辑" left-text="返回" right-text="保存" left-arrow @click-left="onClickLeft"
                     @click-right="savefn"/>
        <div v-show="module === 'headimg'" class="headimg">
            <div class="div">
                <van-uploader :after-read="HeadonRead">
                    <p>
                        <i v-show="!headimgurl" class="zx-icon">&#xe699;</i>
                        <img :src="headimgurl" alt="">
                    </p>
                    <p>点击上传图片</p>
                </van-uploader>
            </div>
            <div>
                <div>
                    <van-cell-group>
                        <van-cell-group>
                            <van-field clearable label="昵称" v-model="nickname" placeholder="请输入昵称"/>
                            <!--<van-field label="签名" placeholder="请输入签名"/>-->
                        </van-cell-group>
                    </van-cell-group>
                </div>
            </div>
            <div>
                <van-button type="default" @click="headimgHandle">提交</van-button>
            </div>
        </div>
        <div v-show="module === 'works'" class="works">
            <div>
                <van-uploader :after-read="workUploadFn">
                    <div class="upload">
                        <div>
                            <p v-show="!wimg"><i class="zx-icon">&#xe6cb;</i></p>
                            <p v-show="wimg"><img style="height: 40px;width: 60px;" :src="wimg" alt=""></p>
                            <p><span>上传新的作品</span></p>
                        </div>
                    </div>
                </van-uploader>
                <div class="item" v-if="work.length">
                    <p v-for="(work,index) in work" :key="index"><img :src="work.imgurl" alt=""><i
                        @click="WorkDel(work.id)" class="zx-icon">&#xe64e;</i></p>

                </div>
            </div>
        </div>
        <div v-show="module === 'baseinfo'" class="baseinfo">
            <div>
                <van-cell-group>
                    <van-field v-model="uname" required clearable label="姓名" placeholder="请输入用户名"/>
                    <van-field v-model="sex" required clearable label="性别" icon="arrow" placeholder="请选择性别"/>
                    <van-field v-model="age" required clearable label="年龄" icon="arrow" placeholder="请输入年龄"/>
                    <van-field v-model="contact" required clearable label="手机号" placeholder="请输入手机号"/>
                    <van-field v-model="wechat" clearable label="微信" placeholder="请输入微信号"/>
                    <van-field v-model="qq" clearable label="qq" placeholder="请输入qq号"/>
                </van-cell-group>
            </div>
        </div>
        <div v-show="module === 'skill'" class="skill">
            <p class="text_top">
                <button><i class="zx-icon">&#xe6a5;</i> &nbsp;新增技能</button>
            </p>
            <div class="item">
                <div class="inner inner_edit">
                    <p><span>Node</span><i>{{value | formatSkill}}</i></p>
                    <van-slider @change="change" v-model="value" :step="20" :min="20" bar-height="4px"/>
                    <i class="zx-icon">&#xe69a;</i>
                </div>
                <div class="inner">
                    <p><span>Node</span><i>{{value | formatSkill}}</i></p>
                    <van-slider @change="change" v-model="value" :step="20" :min="20" bar-height="4px"/>
                    <i class="zx-icon">&#xe69a;</i>
                </div>
                <div class="inner">
                    <p><span>Node</span><i>{{value | formatSkill}}</i></p>
                    <van-slider @change="change" v-model="value" :step="20" :min="20" bar-height="4px"/>
                    <i class="zx-icon">&#xe69a;</i>
                </div>
                <div class="inner">
                    <p><span>Node</span><i>{{value | formatSkill}}</i></p>
                    <van-slider @change="change" v-model="value" :step="20" :min="20" bar-height="4px"/>
                    <i class="zx-icon">&#xe69a;</i>
                </div>
            </div>
        </div>
        <div v-show="module === 'edu'" class="edu">
            <div class="box">
                <van-cell-group>
                    <van-field required clearable label="学校" v-model="school" placeholder="请输入学校名"/>
                    <van-field required clearable label="专业" v-model="speciality" placeholder="请填写专业"/>
                    <van-field required clearable label="学历" v-model="record" icon="arrow" placeholder="请填写学历"/>
                    <van-field required clearable label="开始时间" v-model="start_time" icon="arrow" placeholder="请填写时间如（如：2018-11-02）"/>
                    <van-field required clearable label="截止时间" v-model="end_time" icon="arrow" placeholder="请填写截止时间（如：2018-11-02）"/>
                </van-cell-group>
            </div>
        </div>
        <div v-show="module === 'items'" class="items">
            <div class="edit">
                <p>新增项目经验</p>
                <div>
                    <van-field label="项目名称" placeholder="请输入项目名称" required clearable/>
                    <van-field label="项目职责" placeholder="请输入项目职责" required clearable/>
                    <van-field label="开始时间" placeholder="请选择开始时间" icon="arrow" clearable/>
                    <van-field label="结束时间" placeholder="请选择结束时间" icon="arrow" clearable/>
                    <van-field label="项目描述" type="textarea" placeholder="请输入项目描述" rows="5" autosize/>
                </div>
            </div>

            <div>
                <div class="item">
                    <div>
                        <van-steps direction="vertical">
                            <div class="item">
                                <i class="zx-icon">&#xe69a;</i>
                                <van-step>
                                    <div><p>2016-07-12 12:40</p></div>
                                    <div><strong>【项目名称】微信小程序</strong></div>
                                    <div><strong>【项目职责】小程序前端开发</strong></div>
                                    <div class="text">
                                        1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                                        2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                                    </div>
                                </van-step>
                            </div>
                            <div class="item">
                                <i class="zx-icon">&#xe69a;</i>
                                <van-step>
                                    <div><p>2016-07-12 12:40</p></div>
                                    <div><strong>【项目名称】微信小程序</strong></div>
                                    <div><strong>【项目职责】小程序前端开发</strong></div>
                                    <div class="text">
                                        1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                                        2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                                    </div>
                                </van-step>
                            </div>
                        </van-steps>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="module === 'links'" class="links">
            <div>
                <div class="item" v-for="(links,i) in links" :key="i">
                    <span>{{links.links}}</span>
                    <i @click="LinksDel(links.id)" @ class="zx-icon">&#xe69a;</i>
                </div>

                <div class="newLinks">
                    <van-cell-group>
                        <van-field v-model="Links" type="text" label="连接地址" placeholder="请输入要增加的连接地址" required/>
                    </van-cell-group>
                </div>
                <van-button @click="savefn" plain type="primary">＋增加新的连接</van-button>
            </div>
        </div>
        <div v-show="module === 'jobs'" class="jobs">
            <div>
                <div class="item">
                    <i class="zx-icon">&#xe63c;</i>
                    <p class="first"><span>时间:</span><em>2018-10-04 至 2018-10-04</em></p>
                    <h4 class="first"><span>职位:</span><em>前端开发</em></span></h4>
                    <h4 class="first"><span>公司:</span><em>xx公司</em></h4>
                    <div>
                        <span>职责描述:</span>
                        <p>
                            阿发据了解爱垃圾分类静安路附近阿斯利
                            康解放路卡视角法拉师傅拉丝机发拉萨积分拉萨积分拉丝粉
                        </p>
                    </div>
                </div>
                <div class="item">
                    <i class="zx-icon">&#xe63c;</i>
                    <p class="first"><span>时间:</span><em>2018-10-04 至 2018-10-04</em></p>
                    <h4 class="first"><span>职位:</span><em>前端开发</em></span></h4>
                    <h4 class="first"><span>公司:</span><em>xx公司</em></h4>
                    <div>
                        <span>职责描述:</span>
                        <p>
                            阿发据了解爱垃圾分类静安路附近阿斯利
                            康解放路卡视角法拉师傅拉丝机发拉萨积分拉萨积分拉丝粉
                        </p>
                    </div>
                </div>
                <div>
                    <van-field required clearable label="公司名称" placeholder="请输入公司名称"/>
                    <van-field required clearable label="职务名称" placeholder="请输入职务名称"/>
                    <van-field label="工作内容" type="textarea" placeholder="请描述工作内容" rows="4" autosize/>
                    <van-field required clearable label="开始时间" placeholder="请选择开始时间" icon="arrow"/>
                    <van-field required clearable label="结束时间" placeholder="请选择结束时间" icon="arrow"/>
                </div>
                <div>
                    <van-button type="default">＋添加工作经历</van-button>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom">
            <van-picker :columns="columns" :show-toolbar="true"/>
        </van-popup>
        <van-popup v-model="show1" position="bottom">
            <van-picker :columns="columns2" :show-toolbar="true"/>
        </van-popup>

    </div>
</template>
<script>
    import {Slider} from 'vant';
    import {Step} from 'vant';
    import {Steps} from 'vant';
    import {Uploader} from 'vant';
    import {Field} from 'vant';
    import {Cell} from 'vant';
    import {CellGroup} from 'vant';
    import {Picker} from 'vant';
    import {Popup} from 'vant';
    import {Button} from 'vant';
    import Vue from 'vue';

    Vue.use(Step).use(Steps);
    Vue.use(Slider);
    Vue.use(Popup);
    Vue.use(Field);
    Vue.use(Picker);
    Vue.use(Cell);
    Vue.use(Button);
    Vue.use(CellGroup);
    Vue.use(Uploader);
    export default {
        data() {
            return {

                school:'',
                speciality:'',
                record:'',
                end_time:'',
                start_time:'',

                uname: '',
                age: '',
                sex: '',
                uid: '',
                contact: '',
                wechat:'',
                qq:'',

                work: [],
                wimg: '',
                Links:'',
                links:'',
                value: 60,
                show: false,
                show1: false,
                columns: ['男', '女'],
                columns2: [],
                headimgurl: '',
                nickname: '',
                imgurl: '',
                module: ''
            }
        },
        methods: {
            change(value) {
                console.log(value)
            },
            onRead(file) {
                console.log(file)
            },
            onClickLeft() {
                history.back()
            },
            HeadonRead(file) {
                this.upload(file.file, 'headimgurl')
            },
            workUploadFn(file) {
                this.upload(file.file, 'wimg')
            },
            headimgHandle() {

                let headimgurl = this.headimgurl;
                let nickname = this.nickname;
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                }
                this.$post('/api/user/headInfo', {uid, nickname, headimgurl}).then(res => {
                    if (res.data.err_code == 0) {
                        this.$toast({message: '操作成功'})
                        this.$router.go(-1)
                    } else {
                        this.$toast({message: res.data.err_msg})
                    }
                }).catch(()=> {
                    this.$toast({message: '出错了'})
                })
            },
            savefn() {
                let _module = this.$route.query.module;
                let uid = JSON.parse(localStorage.getItem('user')).uid;
                if (_module == 'works') {
                    let imgurl = this.wimg;
                    this.$post('/api/works/create', {uid, imgurl}).then(res => {
                        if (res.data.err_code == 0) {
                            this.$toast({message: '更新作品成功'})
                            this.WorkGet();
                            this.wimg = '';

                        } else {
                            this.$toast({message: res.data.err_msg})
                        }
                    })
                } else if (_module == 'baseinfo') {
                    let tmp = {
                        uname: this.uname,
                        age: this.age,
                        sex: this.sex,
                        uid: JSON.parse(localStorage.getItem('user')).uid,
                        contact: this.contact,
                        qq:this.qq,
                        wechat: this.wechat
                    };
                    this.$post('/api/user/createUserInfo',tmp).then(rsp=>{
                        if(rsp.data.err_code ==0){
                            this.$toast({message:'操作成功'})
                            this.$router.go(-1)
                        }else{
                            this.$toast({message:rsp.data.err_msg})
                        }
                    })

                }else if(_module == 'links'){
                    let links = this.Links;
                    this.$post('/api/links/create', {uid, links}).then(res => {
                        if (res.data.err_code == 0) {
                            this.$toast({message: '更新作品成功'})
                            this.LinksGet();
                            this.Links = '';

                        } else {
                            this.$toast({message: res.data.err_msg})
                        }
                    })
                }else if (_module =='edu'){
                    let tmp = {

                        school:this.school,
                        speciality:this.speciality,
                        record:this.record,
                        end_time:this.end_time,
                        start_time:this.start_time,
                        uid: JSON.parse(localStorage.getItem('user')).uid,

                    };
                    this.$post('/api/edu/create',tmp).then(rsp=>{
                        if(rsp.data.err_code ==0){
                            this.$toast({message:'操作成功'})
                            this.$router.go(-1)
                        }else{
                            this.$toast({message:rsp.data.err_msg})
                        }
                    })
                }
            },
            upload(file, target) {
                let Form = new FormData();
                Form.append('avatar', file);
                this.$post('/api/upload', Form).then(res => {
                    if (res.data.err_code == 0) {
                        this[target] = res.data.data.imgUrl;
                    } else {
                        this.$toast({message: res.data.err_msg})
                    }
                })
            },
            LinksDel(id) {
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                }
                this.$post('/api/links/del', {uid, id}).then(res => {
                    if (res.data.err_code == 0) {
                        this.$toast({message: '刪除成功'})
                        this.LinksGet();
                    }
                }).catch(() => {
                    //
                })
            },
            WorkDel(id) {
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                }
                this.$post('/api/works/del', {uid, id}).then(res => {
                    if (res.data.err_code == 0) {
                        this.$toast({message: '刪除成功'})
                        this.WorkGet();
                    }
                }).catch(() => {
                    //
                })
            },
            LinksGet(){
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                }
                this.$post('/api/links/get', {uid}).then(res => {
                    console.log(res)
                    if (res.data.err_code == 0) {
                        this.links = res.data.data;
                    }
                }).catch(() => {
                    //
                })
            },
            WorkGet() {
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                }
                this.$post('/api/works/get', {uid}).then(res => {
                    console.log(res)
                    if (res.data.err_code == 0) {
                        this.work = res.data.data;
                    }
                }).catch(() => {
                    //
                })
            },

        },
        created() {
            this.WorkGet();
            this.LinksGet();
            let arr = [];
            document.body.style.backgroundColor = 'rgb(239, 243, 246)'
            console.log(this.$route.query.module)
            this.module = this.$route.query.module
            for (var i = 15; i < 50; i++) {
                arr.push(i)
            }
            this.columns2 = arr
        },
        filters: {
            formatSkill: function (value) {
                if (!value) return ''
                switch (value) {
                    case 20:
                        return '了解';
                        break;
                    case 40:
                        return '熟悉';
                        break;
                    case 60:
                        return '掌握';
                        break;
                    case 80:
                        return '熟练';
                        break;
                    case 100:
                        return '精通';
                        break;

                }
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "../../public/css/info_edit.less";
</style>

